<template>
    <div class="tabs-wrapper">
        <ul class="tabs">
            <li v-for="(item, index) in editableTabs"
                :class="editableTabsValue === item.name?'tab-item active':'tab-item'"
                @click="tableItemClick(item, index) ">
                {{item.title}}
                <span :class="{'tags-li-icon': true, hide: (editableTabs.length < 2)}" @click.stop="removeTab(item, index) ">
                    <i class="el-icon-close"></i>
                </span>
            </li>
        </ul>
        <div class="tags-close-box">
            <div>
                <div>
                    <el-dropdown @command="tabsDropdownOptions">
                        <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="delete_others">{{$t('message.term.delete_others')}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'TabsRouter',
        components: {},
        props: {},
        mounted() {
            this.$nextTick(() => {

            });
        },
        watch: {
            $route: {
                /**
                 * 监听路由变化，触发tabs的变化
                 */
                handler(newRouter) {
                    /** 判断tabs列表中是否已存在新点击的路径 */
                    let existItem = this.editableTabs.find(value => value.path === newRouter.path);
                    if (!!existItem) {
                        /** 如果存在，则指定新值 */
                        this.editableTabsValue = existItem.name;
                    } else {
                        /** 如果不存在，则数组中新增对象 */
                        this.editableTabs.push({
                            title: this.$t(newRouter.meta.title),
                            name: newRouter.name,
                            path: newRouter.path
                        })
                        /** 并指定新值 */
                        this.editableTabsValue = newRouter.name;
                    }
                },
                immediate: true
            },
            /*'$route.path': function (newVal, oldVal) {

            }*/
        },
        computed: {},
        data() {
            return {
                editableTabsValue: '', //用于高亮显示
                editableTabs: [] //tabs路由的数组
            }
        },
        methods: {
            /**
             * 关闭某个页签
             * @param item
             * @param index
             */
            removeTab(item, index) {
                let tabs = this.editableTabs;
                if(tabs.length === 1) {
                    /** 当前只剩一个页签，则什么也不做 */
                    return;
                }

                let activeName = this.editableTabsValue;
                let path = "";
                if (activeName === item.name) {
                    /** 如果删除的是当前所在的页面 */
                    tabs.forEach((tab, index) => {
                        if (tab.name === item.name) {
                            /** 则新的页面可能是前一个，也可能是后一个 */
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                                path = nextTab.path;
                            }
                        }
                    });

                    /** 指定新页面 */
                    this.editableTabsValue = activeName;
                    this.$router.push(path);
                }

                /** 使用过滤方法组成新的tabs页面数组 */
                this.editableTabs = tabs.filter(tab => tab.name !== item.name);
            },
            /**
             * 点击某个页签，用于快速打开曾经打开过的页面
             * @param item
             * @param index
             */
            tableItemClick(item, index) {
                if (this.editableTabsValue === item.name) {
                    /** 如果点击的页面就是当前页面，则什么都不做 */
                    return;
                }
                this.editableTabsValue = item.name;
                this.$router.push(item.path);
            },
            tabsDropdownOptions(command) {
                if(command === "delete_others") {
                    this.deleteOtherTabs();
                }
            },
            /**
             * 删除其他页签
             */
            deleteOtherTabs() {
                /** 使用过滤方法组成新的tabs页面数组 */
                this.editableTabs = this.editableTabs.filter(tab => tab.name === this.editableTabsValue);
            }
        }
    }
</script>
<style scoped>
    .tabs-wrapper {
        background-color: #fff;
        border-bottom: solid 1px #EBEEF5;
        position: relative;
        padding-right: 120px;
    }

    .tabs {
        overflow: hidden;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: 33px;
    }

    .tabs li {
        text-decoration: none !important;
    }

    .tab-item {
        margin: 3px 2px;
        font-size: 12px;
        border-radius: 3px;
        overflow: hidden;
        cursor: pointer;
        height: 25px;
        line-height: 25px;
        border: 1px solid #e9eaec;
        background: #fff;
        padding: 0 5px 0 12px;
        vertical-align: middle;
        color: #666;
        -webkit-transition: all .3s ease-in;
        transition: all .3s ease-in;
    }

    .tags-close-box {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
        width: 30px;
        height: 33px;
        line-height: 33px;
        border: solid 1px #EBEEF5;
        border-bottom: 0;
        border-top: 0;
        text-align: center;
        background-color: #fff;
        cursor: pointer;
    }

    .active {
        background-color: #ecf5ff;
        color: #409eff;
        border: 1px solid #d9ecff;
    }

    .hide {
        visibility: hidden;
    }
</style>